<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增活动配置')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-ActActive-add">
            <input  type="hidden" name="id" value="${(list.ID)!'' }"/>
            <h4 class="form-header h4">活动信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动名称：</label>
                <div class="col-sm-8">
                    <input name="act_name" placeholder="活动名称" th:value="${actActive!=null ?actActive.ACT_NAME:''}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">活动开始日期：</label>
                <div class="col-sm-8">
                    <input   name="begin_time"  readonly  th:value="${actActive!=null ?actActive.BEGIN_TIME:''}" type="text" class="input-sm form-control" id="laydate-startTime" placeholder="开始日期" required/>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">活动结束日期：</label>
                <div class="col-sm-8">
                    <input   name="end_time"    readonly th:value="${actActive!=null ?actActive.END_TIME:''}" type="text" class="input-sm form-control" id="laydate-endTime" placeholder="结束日期" required/>
                </div>
            </div>
            <h4 class="form-header h4">机具信息</h4>
            <div class="row" id="addClass">
                <div class="form-inline" id="addValue" style="margin-left: 30px;">
                    <label >终端来源：</label>
                    <select name="source" id="ly" class="form-control m-b" onchange="getCs(this)" >
                        <option value="">所有</option>
                        <option value="0">定制机</option>
                        <option value="1">自备机</option>
                    </select>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>品牌：</label>
                    <select name="manufacturer" id="cs" class="form-control m-b" onchange="checkValue(this)">
                        <option value="">所有</option>
                        <!--<option th:each="p:${manufacturer}"  th:text="${p.MANU_NAME}" th:value="${p.MANU_CODE}"></option>-->
                    </select>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>终端型号：</label>
                    <select name="terminal_model_id" id="zd" class="form-control m-b">
                        <option value="">所有</option>
                    </select>&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default" onclick="insert(this)">新增一行</button>
                    <button type="button" class="btn btn-default" onclick="remove(this)">移除一行</button>
                </div>
            </div>
            <br>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        
        function onchange() {
            $('body').on('onchange','ly',function(){　　　　//动态事件绑定  为页面所有的dd添加一个事件 包括新增的节点
            });
            $('body').on('onchange','cs',function(){　　　　//动态事件绑定  为页面所有的dd添加一个事件 包括新增的节点
            });
            $('body').on('onchange','zd',function(){　　　　//动态事件绑定  为页面所有的dd添加一个事件 包括新增的节点
            });
        }
        
        function bindListener(){
            $("body").on("click","#del",function(){
                $(this).parent().remove();
            });

        }
        var i=0;
        function insert(e){
            var html = "<div class=\"form-inline\" id=\"addValue\" style=\"margin-left: 30px;\">\n" +
                "                    <label >终端来源：</label>\n" +
                "                    <select name=\"source\" class=\"form-control m-b\" onchange=\"getCs(this)\">\n" +
                "                        <option value=\"\">所有</option>\n" +
                "                        <option value=\"0\">定制机</option>\n" +
                "                        <option value=\"1\">自备机</option>\n" +
                "                    </select>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                "                    <label>品牌：</label>\n" +
                "                    <select name=\"manufacturer\" class=\"form-control m-b\" onchange=\"checkValue(this)\">\n" +
                "                        <option value=\"\">所有</option>\n" +
                "                    </select>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                "                    <label>终端型号：</label>\n" +
                "                    <select name=\"terminal_model_id\" class=\"form-control m-b\">\n" +
                "                        <option value=\"\">所有</option>\n" +
                "                    </select>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
/*
                "                    <button type=\"button\" class=\"btn btn-default\" onclick=\"insert()\">新增一行</button>\n" +
*/
                "                </div>";
            $(e).parents(".row").append(html);
            i++;
            /*bindListener();
            onchange();*/
        }


        function remove(){
            if (i>=1){
                $(".form-inline:last").remove();
                i--;
            }

        }


        function checkValue(e){
            var value = $(e).val();
            var url = ctx + "ActActive/ActActive/getTerminalModel?manu_num="+value;
            var a = $(e).parent().find("[name='terminal_model_id']");
            $.get(
                url,
                function (obj) {
                    var option = "";
                    a.empty();
                    $.each(obj,function(n,o) {
                        var value = o.value;
                        var text = o.label;
                        a.append("<option value='"+value+"'>"+text+"</option>");
                        option += "11";
                    });
                    if (option.length == 0){
                        a.append("<option value=''>请选择</option>");
                    }
                },
                "JSON"
            );
        }
        function getCs(e){
            var url = ctx + "ActActive/ActActive/getCs";
            var a = $(e).parent().find("[name='manufacturer']");
            $.get(
                url,
                function (obj) {
                    var option = "";
                    a.empty();
                    $.each(obj,function(n,o) {
                        a.append("<option value=''>请选择</option>");
                        a.append("<option value='"+o.MANU_CODE+"'>"+o.MANU_NAME+"</option>");
                        option += "11";
                    });
                    if (option.length == 0){
                        a.append("<option value=''>请选择</option>");
                    }
                },
                "JSON"
            );
            $("input[name='manufacturer']").eq(1);
        }


        $(function(){
            <!-- laydate示例 -->
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                var startDate = laydate.render({
                    elem: '#laydate-startTime',
                    max: $('#laydate-endTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });

                var endDate = laydate.render({
                    elem: '#laydate-endTime',
                    min: $('#laydate-startTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });
            });
        });

        var prefix = ctx + "ActActive/ActActive"
        $("#form-ActActive-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/saveActActive", $('#form-ActActive-add').serialize());
            }
        }
    </script>
</body>
</html>